<!--数字输入框-->

<template>
  <div class="w-h-full" :style="{
    textAlign: 'center',
    lineHeight: $parent.$parent.layoutItem.layoutItemConfigData.height - 3 + 'px'
  }">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <InputNumber v-model="value"
                 :style="Object.assign({
                    width: component.compConfigData.inputStyle.width,
                    transform: 'scale('+component.compConfigData.inputStyle.scaleValue+')'
                 }, inputStyleObject)"
                 :size="component.compConfigData.size"
                 :max="component.compConfigData.max"
                 :min="component.compConfigData.min"
                 :step="component.compConfigData.step"
                 :placeholder="component.compConfigData.placeholder"
                 :editable="component.compConfigData.editable"
                 :activeChange="component.compConfigData.activeChange"
                 @on-change="onChangeHandle"
    ></InputNumber>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'InputNumberComp', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin],
    attr: {
      version: '1.1',
      configDataTemp: Object.assign({

        max: 1000,
        min: 0,
        step: 1,
        size: 'large',
        placeholder: '',
        editable: true,
        activeChange: true,
        defaultValue: 1,

        inputStyle: {
          width: '100px',
          scaleValue: 1,
          backgroundColor: '#263238',
          color: '#fff',
          borderColor: '#2196f3',
        },

        onChangeCode: '',

      }, PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildFuncCompInteractionConfiguration([
        PnDesigner.buildFuncCompInteractionStreamItem('itemChange', [
          PnDesigner.buildFuncCompInteractionFieldsMapItem('value','', '值')
        ])
      ]))
    },
    data() {
      return {
        value: 1
      }
    },
    mounted() {
      this.init();

      if (this.component.compConfigData.defaultValue) {
        this.value = this.component.compConfigData.defaultValue
      }
    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.runCustomGlobalJsCode()
        }, (result) => {
          this.runCustomGlobalJsCode()
        });
      },

      onChangeHandle (value) {
        this.$PnDesigner.launchInteractionStream(this.component.compConfigData, 'itemChange', {value: value})
        eval(this.component.compConfigData.onChangeCode)
      },
    },
    computed: {
      inputStyleObject () {
        return {
          '--background-color': this.component.compConfigData.inputStyle.backgroundColor,
          '--color': this.component.compConfigData.inputStyle.color,
          '--border-color': this.component.compConfigData.inputStyle.borderColor,
        }
      }
    }
  };

  export default _this
</script>

<style scoped>
  >>> .ivu-input-number {
    border: 1px solid var(--border-color) !important;
  }
  >>> .ivu-input-number-input-wrap input {
    background-color: var(--background-color) !important;
    color: var(--color) !important;
    border-radius: 0;
  }

</style>
